<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HSBToRGB(HSB 到 RGB 转换器)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }

        .container {
            margin-bottom: 20px;
        }

        .color-box {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
            margin-bottom: 10px;
        }

        input[type="range"] {
            width: 100%;
            height: 10px;
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(to right, red, yellow, green, cyan, blue, magenta, red);
            border-radius: 5px;
            outline: none;
        }

        input[type="range"]:focus {
            outline: none;
        }

        label {
            font-size: 16px;
            margin-right: 10px;
        }

        button {
            background-color: #333;
            color: white;
            padding: 10px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #555;
        }

        @media (max-width: 600px) {
            .color-box {
                width: 150px;
                height: 150px;
            }
        }
    </style>
</head>

<body>

    <h1>HSB 到 RGB 转换器</h1>

    <div class="color-box" id="color-box"></div>

    <!-- HSB Input Controls -->
    <div class="container">
        <label for="hue">色调 (H): </label>
        <input type="range" id="hue" min="0" max="360" value="0">
        <span id="hue-value">0</span>
    </div>

    <div class="container">
        <label for="saturation">饱和度 (S): </label>
        <input type="range" id="saturation" min="0" max="100" value="100">
        <span id="saturation-value">100</span>%
    </div>

    <div class="container">
        <label for="brightness">亮度 (B): </label>
        <input type="range" id="brightness" min="0" max="100" value="100">
        <span id="brightness-value">100</span>%
    </div>

    <!-- RGB & HEX Display -->
    <div class="container">
        <label>RGB:</label>
        <span id="rgb-value">rgb(255, 255, 255)</span>
    </div>
    <div class="container">
        <label>HEX:</label>
        <span id="hex-value">#FFFFFF</span>
    </div>

    <!-- Quick Color Buttons -->
    <div class="container">
        <button id="red" style="background-color: red;">红色</button>
        <button id="green" style="background-color: green;">绿色</button>
        <button id="blue" style="background-color: blue;">蓝色</button>
    </div>

    <!-- Color Scheme Button -->
    <div class="container">
        <button id="complementary">互补色</button>
    </div>

    <script>
        const hueInput = document.getElementById('hue');
        const saturationInput = document.getElementById('saturation');
        const brightnessInput = document.getElementById('brightness');
        const colorBox = document.getElementById('color-box');
        const hueValue = document.getElementById('hue-value');
        const saturationValue = document.getElementById('saturation-value');
        const brightnessValue = document.getElementById('brightness-value');

        const HSBToRGB = (h, s, b) => {
            s /= 100;
            b /= 100;
            const k = i => (i + h / 60) % 6;
            const f = n => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
            return [255 * f(5), 255 * f(3), 255 * f(1)];
        };

        function rgbToHex(r, g, b) {
            return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase();
        }

        function updateColorContent(options) {
            const [r, g, b] = HSBToRGB(options.h, options.s, options.b);
            colorBox.style.background = `rgb(${r}, ${g}, ${b})`;
            document.getElementById('rgb-value').textContent = `rgb(${r}, ${g}, ${b})`;
            document.getElementById('hex-value').textContent = rgbToHex(r, g, b);
        }
        function updateColor() {
            const h = parseInt(hueInput.value);
            const s = parseInt(saturationInput.value);
            const b = parseInt(brightnessInput.value);

            hueValue.textContent = h;
            saturationValue.textContent = s;
            brightnessValue.textContent = b;

            updateColorContent({ h, s, b });
        }


        hueInput.addEventListener('input', updateColor);
        saturationInput.addEventListener('input', updateColor);
        brightnessInput.addEventListener('input', updateColor);

        document.getElementById('red').addEventListener('click', () => {
            hueInput.value = 0;
            saturationInput.value = 100;
            brightnessInput.value = 100;
            updateColor();
        });
        document.getElementById('green').addEventListener('click', () => {
            hueInput.value = 120;
            saturationInput.value = 100;
            brightnessInput.value = 100;
            updateColor();
        });
        document.getElementById('blue').addEventListener('click', () => {
            hueInput.value = 240;
            saturationInput.value = 100;
            brightnessInput.value = 100;
            updateColor();
        });

        document.getElementById('complementary').addEventListener('click', () => {
            const h = (parseInt(hueInput.value) + 180) % 360;
            hueInput.value = h;
            updateColor();
        });

        updateColor();
    </script>

</body>

</html>